<template>
	<view class="fans">
		<u-navbar
			back-text="我的粉丝"
			back-icon-color="#ffffff"
			:back-text-style="{
				color: '#ffffff'
			}"
			:border-bottom="false"
			:background="{
				background: '#F95D4E'
			}"
		></u-navbar>
		<view class="search">
			<u-search
				placeholder="输入手机号或者名称搜索"
				v-model="search"
				:show-action="true"
				border-color="#FF4D4F"
				:height="54"
				bg-color="#ffffff"
				style="width: 100%;"
				:animation="true"
				@search="dosearch"
				@custom="dosearch"
			></u-search>
		</view>
		<view class="">
			<u-tabs :list="list" bg-color="#F95D4E" :is-scroll="false" :current="current" active-color="#ffffff" inactive-color="#ffffff" @change="change"></u-tabs>
		</view>
		<view class="">
			<view class="fansbox" v-if="fansList.length > 0">
				<view class="" v-for="(v, k) in fansList" :key="k">
					<view class="fansli u-flex u-row-left u-col-center">
						<u-avatar :src="v.img" mode="circle" :size="120" style="margin-left: 10rpx;margin-right: 28rpx;"></u-avatar>
						<view class="u-p-l-20" style="color: #101010;">
							<view class="">{{ v.user }}</view>
							<view class="" style="margin-top: 20rpx;">{{ v.create_at }}</view>
						</view>
					</view>
					<u-line color="#E9E9E9" />
				</view>
				<u-loadmore :status="loadstatus" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">竟然没有粉丝</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'fans',
	data() {
		return {
			scrollTop: 0,
			search: '',
			loadstatus: 'loadmore',
			list: [
				{
					name: '直属会员'
				},
				{
					name: '团队会员'
				}
			],
			current: 0,
			fansList: [
				// {
				// 	img: 'https://thirdwx.qlogo.cn/mmopen/vi_32/YeKwIpicwiauZ1NoOomvLhWslM3LINiah2KsiavvttYvxhcW215YIOh7Fh7UbTiaqjBecLZcWmcK7fj8rv8vHZu4yMQ/132',
				// 	user: 'Kumar',
				// 	create_at: '2021-01-09'
				// }
			],
			page: 1
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getFansDetail();
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	onReachBottom() {
		this.loadstatus = 'loading';
		this.page = ++this.page;
		this.getFansDetail();
	},
	//前台进入后台
	onHide() {},
	methods: {
		getFansDetail() {
			this.$u.api
				.getFansDetail({
					page: this.page,
					pagesize: 20,
					search: this.search,
					status: this.current + 1
				})
				.then(res => {
					console.log(res);
					this.fansList.push(...res.data.data);
					this.page = parseInt(res.data.page);
				})
				.catch(err => {
					console.log(err);
				});
		},
		dosearch(val) {
			console.log(val);
			this.fansList = [];
			this.getFansDetail();
		},
		change(index) {
			this.current = index;
			console.log(index);
			this.fansList.length = 0;
			this.page = 1;
			this.getFansDetail();
		}
	}
};
</script>

<style lang="scss" scoped>
.fans {
	.search {
		padding: 12rpx 22rpx;
		background-color: #f95d4e;
	}
	.fansbox {
		.fansli {
			padding: 22rpx 26rpx;
		}
	}
	.nodata {
		margin-top: 438rpx;
	}
}
</style>
